<template>
  <div class="page-works-detail">
    <div class="work-banner" v-lazy:background-image="detail.coverUrl"> </div>
    <div class="work-author">
      <div class="img">
        <img v-lazy="detail.headimgurl" alt="">
      </div>
      <div class="name">
          {{detail.userName}}
          <span class="city">南京 | 大咖设计师</span>
      </div>
      <div class="focus">
        <van-button 
          :disabled="isFocus"
          size="mini" type="primary" @click="onFocus">
            {{isFocus ? '已关注' : '关注'}}
        </van-button>
      </div>
    </div>
    <div class="work-title">{{detail.title}}</div>
    <div class="work-time">{{detail.createTime}}</div>
    <div class="work-detail">
      <img 
        v-for="item in images" 
        :key="item.id"
        :src="item.worksUrl" 
        alt="">
    </div>

    <div class="bottom-handles">
      <van-button @click="onBook">立即预约</van-button>
      <van-icon v-if="isFav" name="star" @click="onFav"/>
      <van-icon v-else name="star-o" @click="onFav"/>
    </div>
  </div>
</template>

<script>
import {listWorksInfo} from '../../api/works'
import {collWorks, collDesigner} from '../../api/user'
export default {
  name: 'worksImageDetail',
  props: {
    id: String
  },
  data(){
    return {
      detail : {},
      images: [],
      isFocus: false,
      isFav: false,
    }
  },
  methods: {
    getWorksImage(){
      listWorksInfo(this.id).then(rsp => {
        if(rsp.code === 200){
          this.images = rsp.data
        }
      })
    },

    onFav(){
      if(!this.isFav){
        collWorks(this.detail.id).then(rsp => {
          if(rsp.code === 200){
            this.$toast.success('收藏成功')
            this.isFav = true
          }
        })
      }
    },

    onFocus(){
      collDesigner(this.detail.memberId).then(rsp => {
          if(rsp.code === 200){
              this.$toast.success('关注成功')
              this.isFocus = true
          }
      })
    },

    onBook(){
      this.$router.push({name: 'bookStep', params: {designerId: this.detail.memberId}})
    }
  },
  created(){
    this.detail = JSON.parse(localStorage.worksImageDetail)
    this.getWorksImage()
  }
}
</script>

<style lang="less">
.page-works-detail{
  padding-bottom: 50px;
  .bottom-handles{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    padding: 10px 15px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    .van-button{
      height: 30px;
      line-height: 30px;
      color: #fff;
      border: none;
      background-color: #eac02b;
    }
    .van-icon{
      line-height: 30px;
      width: 30px;
      text-align: right;
    }
  }

  .work-banner{
    padding-bottom: 75%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  .work-author{
    display: flex;
    align-items: center;
    padding: 20px 10px;
    .img{
      img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .name{
      flex: 1;
      margin: 0 10px;
      .city{
        display: block;
        margin-top: 5px;
        font-size: 11px;
        color: #999;
      }
    }
    .focus{

    }
  }
  .work-title{
    margin: 10px;
    font-size: 18px;
  }
  .work-time{
    margin: 10px;
    font-size: 11px;
    color: #999;
  }
  .work-detail{
    padding: 0 10px;
    margin-top: 20px;
    &>img{
      display: block;
      min-width: 100%;
      margin: 10px auto;
      border-radius: 4px;
    }
  }
}
</style>
